var userNav = document.getElementById("userNav");
var userMassage = document.getElementById("userMassage");
// console.log(userNav.children.length);
// console.log(userMassage.children.length);
var index = 0;
for(var i = 0;i<userNav.children.length;i++){
	userNav.children[i].setAttribute("index", i);
	userNav.children[i].onclick = function(){
		for(var j=0;j<userNav.children.length;j++){
			userNav.children[j].removeAttribute("class");
		}
		this.className = "function1";
		index = this.getAttribute("index");
		// console.log(index);
		for(var e=0;e<userMassage.children.length;e++){
			userMassage.children[e].removeAttribute("class");
			userMassage.children[e].style.display = 'none';
		}
		switch(index){
			case '0':
				userMassage.children[index].className = "result1";
				userMassage.children[index].style.display = 'block';
				break;
			case "1":
				userMassage.children[index].className = "result2";
				userMassage.children[index].style.display = 'block';
				break;
			case "2":
				userMassage.children[index].className = "result3";
				userMassage.children[index].style.display = 'block';
				break;
			case "3":
				userMassage.children[index].className = "result4";
				userMassage.children[index].style.display = 'block';
				break;
		}
	}
}

document.getElementById("changeB").onclick = function(){
	document.getElementById("change1").removeAttribute("readonly");
	document.getElementById("change2").removeAttribute("readonly");
	document.getElementById("change3").removeAttribute("readonly");
	document.getElementById("change4").removeAttribute("readonly");
	// document.getElementById("change5").removeAttribute("readonly");
	document.getElementById("change1").style = "border-bottom: 1px solid #3eaf7c";
	document.getElementById("change2").style = "border-bottom: 1px solid #3eaf7c";
	document.getElementById("change3").style = "border-bottom: 1px solid #3eaf7c";
	document.getElementById("change4").style = "border-bottom: 1px solid #3eaf7c";
	// document.getElementById("change5").style = "border-bottom: 1px solid #3eaf7c";
	document.getElementById("changeA").style.display=  "block";
	document.getElementById("changeB").style.display=  "none";
	document.getElementById("cancel").style.display = "inline-block";
};
document.getElementById("cancel").onclick = function(){
	document.getElementById("change1").setAttribute("readonly", "readonly");
	document.getElementById("change2").setAttribute("readonly", "readonly");
	document.getElementById("change3").setAttribute("readonly", "readonly");
	document.getElementById("change4").setAttribute("readonly", "readonly");
	document.getElementById("change5").setAttribute("readonly", "readonly");
	document.getElementById("change1").style = "border: none";
	document.getElementById("change2").style = "border: none";
	document.getElementById("change3").style = "border: none";
	document.getElementById("change4").style = "border: none";
	// document.getElementById("change5").style = "border: none";
	document.getElementById("cancel").style.display = "none";
	document.getElementById("changeB").style = "";
	document.getElementById("changeA").style.display=  "none";
};
document.getElementById("delete").onclick = function(){
	
};


document.getElementById("img").onclick = function(){
    document.getElementById("hide").click();
};